<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>图书管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico" mce_href="${pageContext.request.contextPath}/static/img/favicon.ico" type="image/x-icon"/>
    <style>
        body {
            background-image: url("${pageContext.request.contextPath}/static/img/bk.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .bn {
            width: 400px;
            margin-top: 160px;
            background: rgba(223, 223, 223, 0.2);
            border-radius: 19px;
            padding: 38px 26px;
        }
    </style>
    <script>
        function refreshCode() {
            //获取验证码图片对象
            var codeImg = document.getElementById("codeImg");
            //设置其src属性，加时间戳
            codeImg.src = "${pageContext.request.contextPath}/userSystem/code?time=" + new Date().getTime();
        }
        // function checkPassword(){
        //     const name = document.getElementById("password").value;
        //     const spanNode = document.getElementById("namespan");
        //     //密码的规则： 长度为6-12，包含任意的字母、数字，不可以使用其他符号
        //     const reg =  /^([a-zA-Z0-9]){6,12}$/i;
        //     if(reg.test(name)){
        //         //符合规则
        //         spanNode.innerHTML = "".fontcolor("green");
        //
        //         return true;
        //     }else{
        //         //不符合规则
        //         spanNode.innerHTML = "密码的长度为6~12位,不可以使用特殊符号".fontcolor("red");
        //
        //         return false;
        //     }
        // }

    </script>
</head>
<body>
<div class="container bn" style="width: 400px;margin-top: 160px">
    <h2 style="text-align: center;margin-bottom: 17px">图书管理系统</h2>
    <form action="${pageContext.request.contextPath}/userSystem/login" method="post">
        <!-- 把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。-->
        <!-- 向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" -->
        <div class="input-group">
                          <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person"
                     viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
              </span>
            <input type="text" name="username" class="form-control " id="username" placeholder="请输入用户名" required oninvalid="setCustomValidity('用户名不能为空');" oninput="setCustomValidity('');"/>
        </div>

        <div class="input-group" style="margin-top: 8px;margin-bottom: 8px">
            <%--            <label for="password">密码:</label>--%>
            <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock"
                     viewBox="0 0 16 16">
  <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
</svg>
              </span>
            <input type="password" name="password" class="form-control"   id="password" placeholder="请输入密码" required oninvalid="setCustomValidity('密码不能为空');" oninput="setCustomValidity('');"/>
<%--                <div style="margin-top: 2px"></div>--%>
<%--                <span  style="font-size:11px" id="namespan"></span>--%>
        </div>

        <div class="input-group">
            <span class="input-group-text" style="height: 38px">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                     class="bi bi-emoji-smile" viewBox="0 0 16 16">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
                </svg>
            </span>
            <%--            <label for="checkCode">验证码:</label>--%>
            <input type="text" name="checkCode" class="form-control" id="checkCode" placeholder="验证码" required oninvalid="setCustomValidity('验证码不能为空');" oninput="setCustomValidity('');"/>
            <a href="javascript:refreshCode();" style="margin: 0px 2px">
                <img alt="验证码" src="${pageContext.request.contextPath}/userSystem/code" id="codeImg" title="看不清换一张"/>
            </a>
        </div>
        <hr/>
        <div class="form-group" style="text-align: center;width: 100%">
            <input class="btn-primary" type="submit" value="登录" style="width: 100%;height: 35px;font-size: 17px">
        </div>

    </form>

    <!-- 出错显示的信息框 -->
    <c:if test="${msg != null && msg != ''}">
        <div style="text-align: center;color: red" class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
            <strong>${msg}</strong>
        </div>
    </c:if>
</div>
</body>
</html>
